<table width="100%" style="">
    <tr class="default">
        <td class="shaded-dark" onmousedown="nativeWindow.startMove()" style="cursor:move">
            <div class="caption">Music Player</div>
            <div class="medium" style="">Enjoy a rich music experience with a "cloud" enabled music player</div>
            <div class="action"margin:2px; style="float:right; width:15px; height:15px; margin-top:-17px;  border:2px solid white;color:white;background-color:#black;font-weight:bold" align="center"
                    onclick="window.location.reload()"
                 >R</div>
            <input type="image" src="img/default/maximize.png" style="float:right;margin-top:-20px" onclick="window.nativeWindow.maximize()"/>
            <input type="image" src="img/default/minimize.png" style="float:right; margin-top:-20px" onclick="window.nativeWindow.restore()"/>
            <div class="action" style="float:right; width:14.6px; height:14.6px; margin-top:-16px;  border:2px solid black;background-color:white;font-weight:bold" align="center"
                    onclick="window.nativeWindow.minimize()"
                 >_</div>

        </td>
    </tr>
</table>
<table  class="rounded-top" border="0" width="760" align="center" style="margin-top:2%; border:1px solid gray">
    <tr class="default">
        <td width="126px" valign="bottom" rowspan="3">
            <div align="center">
                <img id="artist.pic" src="img/default/unknown-artist.jpg" style=""/>
            </div>
        </td>
    </tr>
    <tr class="default">
        <td style="" valign="top">
	
	  <div class="default" style="font-weight:bold">
		<div id="artist" style="overflow:hidden;height:17px; margin-left:5px; font-size:14px">Unknown</div>
	  </div>
	  <div class="default" style="">
		<div id="song" style="overflow:hidden; height:16px; margin-left:5px">Uknown</div>
	  </div>
	  <div class="default" style="">
		<div id="progress" style="margin-left:5px; height:15px; ">0.00 %</div>
	  </div>
            <div class="default" style="margin:5px; width:99%">
                <div id="songprogress" style="">
                    
                </div>
            </div>
            <div style="color:#0C8BD7">.::<span id="library.status" class="small" style="margin-left:5px; float:right;color:#FFF8DC"></span>
            </div>
        </td>
        <td width="150px" rowspan="2" valign="top" style=" border:0px solid gray; font-size:13px;font-weight:bold">
            <div style="width:100%" class="medium"
                 >
                <img src="img/default/mysongs.png" style="float:left"/>
                <div style="float:left">
                    <div class="medium" style="margin-top:5px;width:100%">Music Library</div>
                    <div class="small" style="font-weight:normal">Files Found <span id="providers.lib.size">00</span></div>
                </div>
            </div>
            <div style="float:left;width:100%" class="medium"
                 >
                <img src="img/drive.png" style="float:left"/>
                <div style="float:left">
                    <div style="; margin-top:5px;">Local Library</div>
                    <div class="small" style=";font-weight:normal;">Files Found <span id="local.size">00</span></div>
                </div>
            </div>
            <div style="float:left; width:100%" >
                <img src="img/google-logo.png" style="float:left"/>
                <div style="float:left">
                    <div class="medium" style="margin-top:5px">Google Library</div>
                    <div class="small" style="font-weight:normal">Files Found <span id="gdocs.size">00</span></div>
                </div>
            </div>
            <div style="float:left; width:100%">
                <img src="img/dropbox-logo.png" style="float:left"/>
                <div style="float:left">
                    <div class="medium" style=" margin-top:5px">Dropbox Library</div>
                    <div class="small" style="font-weight:normal">Files Found <span id="dropbox.size">00</span></div>
            </div>
            </div>


        </td>
    </tr>
    <tr class="default shaded-dark">
        <td valign="bottom">
            <div id="" class=" " style="float:left;margin-left:5px; border-top:0px solid gray;">
                <input type="image" src="img/rwd_1.png" onclick="player.controls.back()" style=""/>
                <input type="image" src="img/stop_1.png" onclick="player.controls.stop()"/>
                <input type="image" id="pause.button" src="img/pause_1.png" style="display:none" onclick="player.controls.pause()"/>
                <input type="image" id="play.button" src="img/play_1.png" onclick="player.controls.play()"/>
                <input type="image" src="img/fwd_1.png" onclick="player.controls.next()"/>
                <input type="image" id="play.norepeat" 		src="img/default/no-repeat.png" onclick="jx.dom.hide('play.norepeat'); jx.dom.show('play.repeatall')"/>
                <input type="image" id="play.repeatall" 	src="img/default/repeatall.png" style="display:none" onclick="jx.dom.show('play.repeattrack'); jx.dom.hide('play.repeatall')"/>
                <input type="image" id="play.repeattrack" 	src="img/default/repeat-single.png" style="display:none" onclick="jx.dom.hide('play.repeattrack'); jx.dom.show('play.norepeat')"/>
            </div>
                <div style="float:left;width:150px;margin-top:9px; margin-right:2px">
                    &nbsp;Version <span id="version" class="small"></span>
                </div>
            
        </td>
  </tr>
    
</table>
<table border="0" width="100%" style="" cellspacing="0">
    <tr class="default">
        <td style="" valign="top">
            <div id="player_stdout"></div>
        </td>
    </tr>

</table>
